<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
</head>
<body style="background-color: #e9eaee">
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" placeholder="请输入可课程关键字" type="text">
                            <button type="button" class="btn search-button"></button>
                          <!--  <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>-->
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="source-pay-order">
    <div class="container">
        <div class="row">
            <div class="col-md-12 order-table-box" id="">
                <h4 class="title">实付金额 <span class="cost"> ¥109.00 </span></h4>
                <table class="table">
                    <thead class="text-center">
                        <tr>
                            <td>交易号</td>
                            <td>课程</td>
                            <td>课时</td>
                            <td>价格(元）</td>
                        </tr>
                    </thead>
                    <tbody class="text-center">
                        <tr class="order-detail">
                            <td>DGF133450987</td>
                            <td>设计与发现</td>
                            <td>10 课时</td>
                            <td>¥109.00 </td>
                        </tr>
                    </tbody>
                </table>
                <form class="confirm-form" onsubmit="return checkData()" id="confirm-form">
                    <table class="table">
                        <thead>
                            <tr>
                                <td><span>支付方式</span></td>
                            </tr>
                        </thead>
                        <tbody class="">
                            <tr>
                                <td><span class="alipay-icons confirmed"></span></td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="hidden" id="source-no" value="">
                    <div class="form-group clearfix">
                        <button id="pay-btn" type="submit" disabled class="btn">立即支付</button>
                    </div>
                    <div class="form-group clearfix">
                        <span class="user-agree">我已阅读并接受<a>《用户服务协议》</a></span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer pos-fix">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(function(){
        $(document).click(function(ev){
            var ev = ev || event;
            var target = ev.target
            if(target.id == "index-search") {
                return
            }
            $("#head-input-box").removeClass('search-re');
            setTimeout(function(){
                $("#head-input-box").find('input').blur();
            },300);
        });
        $(".search-button").click(function(ev){
            var $that = $("#head-input-box");
            var isTrue = $that.is(".search-re");
            var ev = ev || event;
            ev.stopPropagation();
            if($that.addClass("search-re").find("input").val() == "") {
                if(isTrue) {
                    $that.removeClass("search-re");
                    setTimeout(function(){
                        $that.find("input").blur();
                    },300)
                } else {
                    $that.addClass("search-re");
                    setTimeout(function(){
                        $that.find("input").focus();
                    },300)
                }
            } else {
                setTimeout(function(){
                    $that.find("input").focus();
                },300);
                if(isTrue) {
                    alert("哈哈哈哈");
                }
            }
        });
        $(".alipay-icons").click(function(){
            $(this).toggleClass("confirmed");
        });
        $(".user-agree").click(function(){
           $(this).toggleClass("user-check");
            if($(this).hasClass("user-check")) {
                $("#pay-btn").removeAttr("disabled");
            } else {
                $("#pay-btn").attr("disabled", "disabled");
            }
        });

       /* $("#index-search").blur(function () {
            $(this).animate({
                right : '-100%'
            });
            $(this).removeClass("search-re");
        })*/


    });
    function checkData() {
        if( !$(".alipay-icons").hasClass("confirmed")) {
            alert("未选择支付方式");
            return false
        }
        if( !$(".user-agree").hasClass("user-check")) {
            alert("还未接受协议");
            return false
        }
    }
</script>
</body>
</html>